<template>
  <div>
    <!-- 标题栏 -->
    <NavBar :title="$route.meta.title"> </NavBar>
    <van-tabs>
      <van-tab title="Easy">
        <v-table
          is-horizontal-resize
          style="width:100%"
          :columns="columns"
          :table-data="tableData"
          row-hover-color="#eee"
          row-click-color="#edf7ff"
          :title-row-height="60"
          :row-height="60"
          :paging-index="(pageIndex - 1) * pageSize"
        ></v-table>
        <div class="mt20 mb20 bold" style="margin-top:10px;"></div>
        <v-pagination
          @page-change="pageChange"
          @page-size-change="pageSizeChange"
          :total="50"
          :page-size="pageSize"
          :layout="['total', 'prev', 'pager', 'next', 'sizer', 'jumper']"
        ></v-pagination
      ></van-tab>
      <van-tab title="Tree"></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";

export default {
  components: {
    NavBar
  },
  data() {
    return {
      pageIndex: 1,
      pageSize: 20,
      tableData: [
        {
          name: "赵伟",
          tel: "156*****1987",
          hobby: "钢琴、书法、唱歌",
          address: "上海市黄浦区金陵东路569号17楼"
        },
        {
          name: "李伟",
          tel: "182*****1538",
          hobby: "钢琴、书法、唱歌",
          address: "上海市奉贤区南桥镇立新路12号2楼"
        },
        {
          name: "孙伟",
          tel: "161*****0097",
          hobby: "钢琴、书法、唱歌",
          address: "上海市崇明县城桥镇八一路739号"
        },
        {
          name: "周伟",
          tel: "197*****1123",
          hobby: "钢琴、书法、唱歌",
          address: "上海市青浦区青浦镇章浜路24号"
        },
        {
          name: "吴伟",
          tel: "183*****6678",
          hobby: "钢琴、书法、唱歌",
          address: "上海市松江区乐都西路867-871号"
        }
      ],
      columns: [
        {
          field: "name",
          title: "姓名",
          width: 80,
          titleAlign: "center",
          columnAlign: "center",
          isResize: true,
          isFrozen: true
        },
        {
          field: "tel",
          title: "手机号码",
          width: 100,
          titleAlign: "center",
          columnAlign: "center",
          isEdit: true,
          isResize: true
        },
        {
          field: "hobby",
          title: "爱好",
          width: 150,
          titleAlign: "center",
          columnAlign: "center",
          isEdit: true,
          isResize: true
        },
        {
          field: "address",
          title: "地址",
          width: 280,
          titleAlign: "center",
          columnAlign: "left",
          isEdit: true,
          formatter: function(rowData, rowIndex, pagingIndex, field) {
            return `<span class='cell-edit-color' style="color:red">${rowData[field]}</span>`;
          },
          isResize: true
        }
      ]
    };
  },
  methods: {
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
    },
    pageSizeChange(pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
    }
  }
};
</script>
<style lang="less">
.v-table-class {
  font-size: 15px;
}
</style>
